<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      key 的作用：
        为了给每个元素提供一个唯一的标识，好让 Vue 内部在数据发生变化时根据这个 Key 去做 diff 比较。从而更高效。

      当没有使用 key 的时候会出现什么问题？
        没有设置 key 的时候，Vue 内部会使用 index 做为 key，当有一些表单输入与元素的顺序发生变化时会出现页面效果错乱的问题。

      diff算法：
        Vue 会在初次渲染时，根据数据生成虚拟DOM，当数据再次发生变化会使用新的数据再生成一份虚拟DOM，将 新旧两份虚拟DOM做比较，
        计算出最小的变化点，然后再映射到真实的DOM上。

      虚拟DOM是什么？
        本质是一个JS对象，通过该对象来表示一个节点元素

     -->

    <div id="app">
      <button @click="add1">Add1</button>
      <button @click="add2">Add2</button>
      <hr />

      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item.name }} - {{item.age}}
          <input type="text" />
        </li>
      </ul>
    </div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            list: [
              { id: "001", name: "张三", age: 18 },
              { id: "002", name: "李四", age: 19 },
              { id: "003", name: "王五", age: 20 },
            ],
          };
        },

        methods: {
          add1() {
            console.log("this", this);
            this.list.push({ id: "004", name: "马六", age: 21 });
          },
          add2() {
            this.list.unshift({ id: "004", name: "马六", age: 21 });
          },
        },

        // // 渲染函数
        // render() {
        //   // Vue.h() 用于创建虚拟DOM
        //   //    第一个参数：要创建的元素类型
        //   //    第二个参数：元素的 attribultes
        //   //    第三个参数：元素的子元素 childern
        //   const vnode = Vue.h("div", { class: "abc" }, [
        //     Vue.h("p", null, "我是一个p"),
        //     Vue.h("button", null, "点我"),
        //   ]);
        //   console.log("vnode", vnode);
        //   return vnode;
        // },
      });

      app.mount("#app");
    </script>
  </body>
</html>
